<script setup lang="ts">
import { columns } from '../attribute/columns'
import { useAdminOrderStore } from '../store/adminOrder'
import { storeToRefs } from 'pinia'
import { SearchIcon } from 'tdesign-icons-vue-next'
import { onMounted, ref } from 'vue'
import { post, get } from '@/utils/api'
import DeleteDialog from './DeleteDialog.vue'
import { MessagePlugin } from 'tdesign-vue-next'

const store = useAdminOrderStore()
const { tableData, tableLoading, deleteIds, deleteVisible, contentLoading } = storeToRefs(store)
const { getData } = store

onMounted(async () => {
  await getData()
  contentLoading.value = false
})

const searchData = ref()
const search = async () => {
  if (searchData.value === undefined || searchData.value.trim() === '') {
    await getData()
    return
  }
  tableData.value = []
  tableData.value = await post('/api/order/search', { outTradeNo: searchData.value.trim() })
}

const refresh = async () => {
  tableData.value = []
  searchData.value = undefined
  await getData()
}

const singleDelete = (row: any) => {
  deleteVisible.value = true
  deleteIds.value = [row.id]
}
const batchDelete = () => {
  if (deleteIds.value.length === 0) {
    MessagePlugin.closeAll()
    MessagePlugin.warning('删除失败，数据为空！')
    return
  }
  deleteVisible.value = true
}

const selectIdsChange = (ids: any) => {
  deleteIds.value = ids
}

const clear = async () => {
  const response = await get('/api/order/clear')
  MessagePlugin.closeAll()
  MessagePlugin(response.status, response.message)
  if (response.status === 'success') {
    tableData.value = []
    await getData()
  }
}
</script>

<template>
  <t-card v-if="!contentLoading">
    <t-space>
      <t-input v-model="searchData" placeholder="[订单号]" size="small" @enter="search">
        <template #suffixIcon>
          <search-icon />
        </template>
      </t-input>
      <t-button size="small" theme="primary" @click="search">搜索</t-button>
      <t-button size="small" theme="primary" variant="outline" @click="clear">清理</t-button>
      <t-button size="small" theme="primary" variant="outline" @click="batchDelete">
        删除
      </t-button>
      <t-button size="small" theme="primary" variant="outline" @click="refresh"> 刷新 </t-button>
    </t-space>
    <t-divider />
    <t-table
      :columns="columns"
      :data="tableData"
      row-key="id"
      :async-loading="tableLoading"
      hover
      stripe
      :pagination="{
        defaultCurrent: 1,
        defaultPageSize: 5,
        total: tableData.length
      }"
      :selected-row-keys="deleteIds"
      @select-change="selectIdsChange"
      cellEmptyContent="-"
    >
      <template #status="{ row }">
        <t-link v-if="row.status === 1" theme="success" hover="color">已支付</t-link>
        <t-link v-else theme="danger" hover="color">未支付</t-link>
      </template>
      <template #type="{ row }">
        <t-link v-if="row.status === 1" theme="success" hover="color">微信支付</t-link>
        <t-link v-else theme="primary" hover="color">支付宝支付</t-link>
      </template>
      <template #operate="{ row }">
        <div class="operate">
          <t-button class="item" size="small" variant="outline" @click="singleDelete(row)"
            >删除</t-button
          >
        </div>
      </template>
    </t-table>
  </t-card>

  <DeleteDialog />
</template>

<style scoped lang="less">
.operate > * {
  margin: 0 5px;
}
</style>
